<template>
	<view style="padding: 10px;">
		 <form @submit="formSubmit" @reset="formReset">
		                <view class="uni-form-item uni-column">
		                    <view>
		                      <label> 启用报警  </label>  <switch name="Alertswitch" :checked="this.Setting.AlertEnabled" @change="AlertswitchChange"/>
		                    </view>
		                </view>
		                <view class="uni-form-item uni-column">
		                    <view class="title">最高环境温度</view>
		                    <slider  :value="Setting.Threshold.MaxTemp" min="0" max="50" name="tempslider" show-value @change="TempsliderChange"></slider>
							<view class="title">最高速度</view>
							<slider :value="Setting.Threshold.MaxVel" min="0" max="50" name="Velslider" show-value @change="VelsliderChange"></slider>
							<view class="title">最高扭矩</view>
							<slider :value="Setting.Threshold.MaxTorque" min="0" max="50" name="Torqueslider" show-value @change="TorquesliderChange"></slider>
							<view class="title">最高电流</view>
							<slider :value="Setting.Threshold.MaxCurr" min="0" max="50" name="Currslider" show-value  @change="CurrsliderChange" ></slider>
		                </view>
		               <view v-if="maxTemp>20">最高温度{{maxTemp}}</view>
		                <view class="uni-btn-v">
		                    <button form-type="" v-on:click="test()">提交</button>
		                    <button type="default" form-type="reset">复位</button>
		                </view>
		            </form>
		
	</view>
</template>

<script>
	import mqtt from 'mqtt'
	import {
		title,
		broker
	} from '../../common/config.js'
	const options = {
		keepalive: 60,
		connectTimeout: 40000,
		// clientId: 'mqtitId-Home',
		reschedulePings: false,
		username: broker.username,
		password: broker.password,
		clean: true
	}
	var mqttClient = mqtt.connect(broker.url, options)
	mqttClient.on('connect', (e) => {
		console.log("连接成功！！！")
	
		mqttClient.subscribe(broker.topic, {
			qos: 0
		}, (error) => {
			if (!error) {
				console.log('订阅成功')
			} else {
				console.log('订阅失败')
			}
		})
	
	})
	// 接收消息处理
	mqttClient.on('message', (topic, message) => {
		   console.log('收到来自', topic, '的消息', message.toString())
		// console.log('消息内容', message)
		//this.msg = message.values
		//var str = String.fromCharCode.apply(null, message);
		//var res = JSON.parse(str);
		 
	
	})
	export default {
		data() {
			return {
				maxTemp:25,
				Setting:{
					AlertEnabled:false,
					Threshold:{	MaxTemp:10,MaxVel:10,MaxTorque:10,MaxCurr:10},
					},
			}
		},
		methods: {
			  AlertswitchChange: function (e) {
			             console.log('switch1 发生 change 事件，携带值为', e.target.value)
						 this.Setting.AlertEnabled=e.target.value
			         },
			TempsliderChange(e) {
			            console.log('value 发生变化：' + e.detail.value)
						this.Setting.Threshold.MaxTemp=e.detail.value
						 uni.setStorageSync('MaxTemp', e.detail.value);
			},
		 VelsliderChange(e) {
		           //  console.log('value 发生变化：' + e.detail.value)
		 		//	this.maxTemp=e.detail.value
				this.Setting.Threshold.MaxVel=e.detail.value
		 },
		 TorquesliderChange(e) {
		           //  console.log('value 发生变化：' + e.detail.value)
		 		this.Setting.Threshold.MaxTorque=e.detail.value
		 },
		 CurrsliderChange(e) {
		           //  console.log('value 发生变化：' + e.detail.value)
		 		this.Setting.Threshold.MaxCurr=e.detail.value
		 },
			test(){
				 console.log(this.Setting)
				 mqttClient.publish(broker.topic, JSON.stringify(this.Setting))
			/*
			uni.chooseImage({
			    count: 6, //默认9
			    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			    sourceType: ['album'], //从相册选择
			    success: function (res) {
			        console.log(JSON.stringify(res.tempFilePaths));
			    }
			});
				const requestTask = uni.request({
				    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
				    data: {
				        name: 'name',
				        age: 18
				    },
				    success: function(res) {
				        console.log(res.data);
				    }
				});*/
			}
		}
	}
</script>

<style>
.uni-form-item{ margin-top: 10px;}
.uni-btn-v button{ margin-top: 10px;}
</style>
